<template>
  <div class="box">
    <div class="mark" v-if="isAct">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);line-height: 3;padding-left: 1em;">
        <el-breadcrumb-item>拼券广场</el-breadcrumb-item>
        <el-breadcrumb-item>拼券活动</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="markPage">
        <div class="soulist">
          <el-select v-model="value" placeholder="活动名称">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="value" placeholder="类型">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-date-picker v-model="value1" type="date" placeholder="开始日期">
          </el-date-picker>
          <el-date-picker v-model="value2" type="date" placeholder="结束日期">
          </el-date-picker>
          <el-button type="primary">搜索</el-button>
        </div>
        <div class="activity_box">
          <div class="activity">
            <div class="flex act_top">
              <strong>活动名称：七夕鹊桥会</strong>
              <el-button type="primary" @click="openAct">我要报名</el-button>
            </div>
            <div class="flex explain">
              <span>活动周期：</span>
              <div>2019-07-01 至 2019-09-01</div>
            </div>
            <div class="flex explain">
              <span>参与店铺：1名 </span>&nbsp;&nbsp;&nbsp;
              <span>已报名：10名</span>
            </div>
            <div class="flex explain">
              <span>要求说明：</span>
              <div class="excet">
                <div class="text_asd">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin
                  gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum
                  sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum,
                  nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.
                </div>
                <div class="plain">
                  <router-link to="/participated">
                    <span style="color: #3A8EE6;">查看已参加活动</span>
                  </router-link>
                </div>
              </div>
            </div>
          </div>
          <div class="activity">
            <div class="flex act_top">
              <strong>活动名称：七夕鹊桥会</strong>
              <el-button type="primary">我要报名</el-button>
            </div>
            <div class="flex explain">
              <span>活动周期：</span>
              <div>2019-07-01 至 2019-09-01</div>
            </div>
            <div class="flex explain">
              <span>参与店铺：1名 </span>&nbsp;&nbsp;&nbsp;
              <span>已报名：10名</span>
            </div>
            <div class="flex explain">
              <span>要求说明：</span>
              <div class="excet">
                <div class="text_asd">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin
                  gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum
                  sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum,
                  nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.
                </div>
                <div class="plain">查看已参加活动</div>
              </div>
            </div>
          </div>
          <div class="activity">
            <div class="flex act_top">
              <strong>活动名称：七夕鹊桥会</strong>
              <el-button type="primary">我要报名</el-button>
            </div>
            <div class="flex explain">
              <span>活动周期：</span>
              <div>2019-07-01 至 2019-09-01</div>
            </div>
            <div class="flex explain">
              <span>参与店铺：1名 </span>&nbsp;&nbsp;&nbsp;
              <span>已报名：10名</span>
            </div>
            <div class="flex explain">
              <span>要求说明：</span>
              <div class="excet">
                <div class="text_asd">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin
                  gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum
                  sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum,
                  nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.
                </div>
                <div class="plain">查看已参加活动</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mark" v-if="!isAct">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);line-height: 3;padding-left: 1em;">
        <el-breadcrumb-item>拼券广场</el-breadcrumb-item>
        <el-breadcrumb-item>拼券活动</el-breadcrumb-item>
        <el-breadcrumb-item>我要报名</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="markPage">
        <el-page-header @back="goBack" content="参与拼劵惠活动"></el-page-header>
        <div class="option_act">
          <el-button type="primary" @click='choice'>选择活动模板</el-button>
          <div class="houdong">
            <el-table :data="tableData" border style="width: auto">
              <el-table-column prop="date" label="ID" width="80">
              </el-table-column>
              <el-table-column prop="type" label="模板类型" width="150">
              </el-table-column>
              <el-table-column prop="factor" label="条件" width="240">
              </el-table-column>
              <el-table-column prop="discount" label="优惠金额/折扣" width="180">
              </el-table-column>
              <el-table-column prop="toexamine" label="审核状态" width="180">
              </el-table-column>
              <el-table-column prop="state" label="状态" width="180">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="popup" v-if="ispup">
           <div class="pbox">
             <div class="topHeader flex">
               <strong>选择优惠模板</strong>
               <el-button @click="close" type="primary"><i class="el-icon-close"></i></el-button>
             </div>
             <div class="houdong apo">
               <el-table :data="tableData" border style="width: auto">
                 <el-table-column prop="date" label="ID" width="80">
                 </el-table-column>
                 <el-table-column prop="type" label="模板类型" width="150">
                 </el-table-column>
                 <el-table-column prop="factor" label="条件" width="240">
                 </el-table-column>
                 <el-table-column prop="discount" label="优惠金额/折扣" width="180">
                 </el-table-column>
                 <el-table-column prop="toexamine" label="审核状态" width="180">
                 </el-table-column>
                 <el-table-column prop="state" label="状态" width="180">
                 </el-table-column>
               </el-table>
             </div>
           </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isAct: true,
        ispup:false,
        a: 1,
        currentPage4: 1,
        value1: '',
        value2: '',
        options: [{
          // value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
         tableData: [{
          date: '10001',
          type:'满减',
          factor:'满100/8折',
          discount: '￥30',
          address: '满100/8折',
          toexamine:'已通过',
          state:'选择'
          }]
      }
    },
    methods: {
      goBack() {
        this.isAct =true;
      },
      close(){
       this.ispup = false;
        },
      openAct(){
         this.isAct =false;
      },
      choice(){
        this.ispup = true;
      }
    },
  }
</script>

<style scoped>
  .mark {
    text-align: left;
  }

  .soulist {
    margin: 1.2121rem 0 .6rem 0;
  }

  .header_fd {
    padding: .4rem 0;
  }

  .el-select,
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 160px;
  }

  .activity {
    width: 850px;
    height: 300px;
    padding: 0 20px;
    margin-left: 2px;
    font-size: 14px;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 0 6px rgba(0, 0, 0, .04);
  }

  .act_top {
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    margin-top: 20px;
  }

  .excet {
    width: 400px;
    height: 160px;
    line-height: 20px;
  }

  .explain {
    margin-bottom: 5px;
  }

  .plain {
    color: #3A8EE6;
    cursor: pointer
  }

  .text_asd {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    box-orient: vertical;
  }

  .activity_box {
    width: 80%;
    position: absolute;
    top: 160px;
    bottom: 0;
    padding-top: 5px;
    overflow: auto;
  }

  .el-page-header {
    line-height: 60px;
    margin-left: 15px;
    color: #3A8EE6;
  }

  .option_act {
    font-size: 16px;
    margin-left: 15px;
  }

  /deep/ .el-page-header__content {
    font-size: 16px;
  }
  .houdong{
    width: 1010px;
    margin-top: 20px;

  }
  .apo{
    height: auto;
    max-height: 400px;
    overflow-y: auto;
  }
  /deep/.el-table__body-wrapper .is-scrolling-left{
    height: 48px;
    line-height: 48px;
  }
   /deep/ .el-table--scrollable-x .el-table__body-wrapper{
     overflow-x:hidden;
  }
  .popup{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
  }
  .box{
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
  }
  .pbox{
    margin: 60px;
    width: 1010px;
    background-color: white;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 0 6px rgba(0, 0, 0, .04);
    position: relative;
  }
  .topHeader{
    font-size: 16px;
    justify-content: space-between;
  }
  .topHeader /deep/ .el-button{
    padding: 2px 4px;
  }
  .el-table--border{
    margin-bottom: 10px;
  }
</style>
